<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Home-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
</head>
<body>
<div class="wrapper">
    <div th:replace="commom/bar :: topbar"></div>

    <!-- Sidebar -->
    <div th:replace="commom/bar :: sidebar"></div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title">项目管理系统</h4>

                </div>
                <!--数据统计-->
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="card card-stats card-round">
                            <div class="card-body ">
                                <div class="row align-items-center">
                                    <div class="col-icon">
                                        <div class="icon-big text-center icon-primary bubble-shadow-small">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                    <div class="col col-stats ml-3 ml-sm-0">
                                        <div class="numbers">
                                            <p class="card-category">user</p>
                                            <h4 class="card-title" th:text="${session.userCount}"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="card card-stats card-round">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-icon">
                                        <div class="icon-big text-center icon-info bubble-shadow-small">
                                            <i class="fas fa-box"></i>
                                        </div>
                                    </div>
                                    <div class="col col-stats ml-3 ml-sm-0">
                                        <div class="numbers">
                                            <p class="card-category">project</p>
                                            <h4 class="card-title" th:text="${session.projectCount}"></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!--左边大框-->
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-body">
                                <!--导航栏-->
                                <div class="row row-nav-line">
                                    <ul class="nav nav-tabs nav-line nav-color-secondary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active show" id="pills-more-tab-nobd" data-toggle="pill"
                                               href="#pills-more-tab" role="tab" aria-controls="pills-more-nobd"
                                               aria-selected="false">更多</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="pills-recommend-tab-nobd"
                                               data-toggle="pill"
                                               href="#pills-recommend-tab" role="tab"
                                               aria-controls="pills-recommend-nobd"
                                               aria-selected="true">推荐项目</a>
                                        </li>
                                    </ul>
                                    <!--                                    <div id="add-row-filter" class="dataTables_filter" style="float: right; margin-top:12px; ">-->
                                    <!--                                        <span class="input-group">-->
                                    <!--                                            <input aria-controls="add-row" type="text" class="form-control form-control-sm" placeholder="请输入关键字" th:onkeyup="searchWord(this)" id="search1" autocomplete="off">-->
                                    <!--                                            <span class="input-group-btn" style="float: right">-->
                                    <!--                                                <button class="btn btn-primary" onclick="searchByWord()"><i class="fas fa-search"></i></button>-->
                                    <!--                                            </span>-->
                                    <!--                                        </span>-->
                                    <!--                                    </div>-->
                                    <div id="showDiv1"
                                         style="display:none; position:absolute;margin-left: 60%; margin-top: 52px; z-index:1000;background:white; width:195px;font-size: 16px;color:#575962;border:1px solid #ccc;">
                                    </div>
                                </div>

                                <!--主体-->
                                <div class="tab-content mt-2 mb-3" id="pills-tabContent">
                                    <!--更多项目-->
                                    <div class="tab-pane fade show active" id="pills-more-tab" role="tabpanel"
                                         aria-labelledby="pills-more-tab-nobd">
                                        <div id="allDiv"></div>
                                        <div class="text-right mt-3 mb-3">
                                            <ul id="allPage" class="pagination"></ul>
                                        </div>
                                    </div>
                                    <!--推荐项目-->
                                    <div class="tab-pane fade " id="pills-recommend-tab" role="tabpanel"
                                         aria-labelledby="pills-recommend-tab-nobd">
                                        <div id="recommendDiv"></div>
                                        <div class="text-right mt-3 mb-3">
                                            <ul id="recommendPage" class="pagination"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--右边小框-->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <!--导航栏-->
                                <div class="row row-nav-line">
                                    <ul class="nav nav-tabs nav-line nav-color-secondary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active show" id="pills-today-tab-nobd"
                                               data-toggle="pill" href="#pills-today-tab" role="tab"
                                               aria-controls="pills-today-nobd">今日热门</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="pills-week-tab-nobd" data-toggle="pill"
                                               href="#pills-week-tab" role="tab"
                                               aria-controls="pills-week-nobd">本周热门</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--主体-->
                                <div class="tab-content mt-2 mb-3">
                                    <!--今日热门-->
                                    <div class="tab-pane fade show active" id="pills-today-tab" role="tabpanel"
                                         aria-labelledby="pills-today-tab-nobd">
                                        <div id="todayDiv"></div>
                                        <div class="text-right mt-3 mb-3">
                                            <ul id="todayPage" class="pagination"></ul>
                                        </div>
                                    </div>

                                    <!--本周热门-->
                                    <div class="tab-pane fade" id="pills-week-tab" role="tabpanel"
                                         aria-labelledby="pills-week-tab-nobd">
                                        <div id="weekDiv"></div>
                                        <div class="text-right mt-3 mb-3">
                                            <ul id="weekPage" class="pagination"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分享链接modal-->
<div class="modal fade" id="RowModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-bd">
                <h5 class="modal-title">
                    <span class="fw-mediumbold">
                         Project Share
                    </span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="small">You can copy the following links to share with friends</p>
                <form>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group form-group-default">
                                <input id="copyContent" type="text" class="form-control" placeholder="fill name"
                                       value="">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div style="text-align:center; vertical-align:middle;">
                <button type="button" id="addRowButton" class="btn btn-primary">复制链接</button>
            </div>
            <div class="modal-footer no-bd"></div>
        </div>
    </div>
</div>

<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js"/>
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_js"/>

<!--加载更多项目-->
<script type="text/javascript">
    $(function () {
        var allDiv = $('#allDiv');
        var allPage = $('#allPage');
        addProjectsPage(allDiv, allPage, null);
    })

    /*根据类型获取项目*/
    function getSpecifiedType(type) {
        var allDiv = $('#allDiv');
        var allPage = $('#allPage');
        addProjectsPage(allDiv, allPage, type);
    }

    /*请求数据*/
    function addProjectsPage(div, ul, projectsType) {
        pageStart();

        function pageStart() {
            $.ajax({
                type: "get",
                url: "/getProjectsByTypePage",
                dataType: "json",
                data: {
                    page: '1',
                    projectsType: projectsType
                },
                success: function (data) {
                    appendProjectsRecordHtml(data.list, div)
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: data.page,
                        totalPages: data.totalPage,
                        numberOfPages: data.pageSize,
                        itemTexts: function (type, page, current) {
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {
                            $.ajax({
                                type: "get",
                                url: "/getProjectsByTypePage",
                                dataType: "json",
                                data: {
                                    page: page,
                                    projectsType: projectsType
                                },
                                success: function (data) {
                                    appendProjectsRecordHtml(data.list, div);
                                }
                            });
                        }
                    };
                    $(ul).bootstrapPaginator(options);
                }
            });
        }
    }

    /*拼接分页页面*/
    function appendProjectsRecordHtml(list, div) {
        $(div).html("");
        var tableShow = '';
        for (var i = 0; i < list.length; i++) {
            console.log(list[i]);
            var type = "'" + list[i].type + "'";

            /*如果最近更新小于24小时*/
            if (list[i].updateTime <= 24 && list[i].updateTime != null) {
                var updateTimeTextShow = list[i].updateTime + '小时前' + "&nbsp;&nbsp;<i class=far fa-paper-plane></i>&nbsp;&nbsp";
            } else {
                var updateTimeTextShow = "";
            }

            /*如果最近更新大于24小时*/
            /*拼接更新时间，如何没有更新时间，获取创建时间*/
            if (list[i].updateDate != null) {
                var updateDate = list[i].updateDate;
                var date = new Date(updateDate);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;    //js从0开始取
                var date1 = date.getDate();
                var curTime = year + "年" + month + "月" + date1 + "日";
                var updateDateTextShow = "更新于" + curTime;
                var createDateTextShow = "";
            } else {
                var createDate = list[i].createDate;
                var date = new Date(createDate);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;    //js从0开始取
                var date1 = date.getDate();
                var curTime = year + "年" + month + "月" + date1 + "日";
                var createDateTextShow = "更新于" + curTime;
                var updateDateTextShow = "";
            }
            tableShow +=
                /*项目详情左边*/
                '    <div class="col-md-12 row">\n' +
                '    <div class="col-lg-9">\n' +
                '       <span class="avatar avatar-online" style="float: left;width: 30px;height: 30px">\n' +
                '           <span class="avatar-title rounded-circle border border-white bg-info">' + list[i].firstname + '</span>\n' +
                '       </span>\n' +
                '       <div style="float: left">\n' +
                '           <a class="defineBStyle" href="projects_view/' + list[i].projectId + '">\n' +
                '               <span style="color: #145180;font-size: 18px">\n' +
                '                   ' + list[i].username + '/' + list[i].name + '\n' +
                '               </span>\n' +
                '           </a>\n' +
                '           <span class="defineAStyle" style ="color:#fd7e14">\n' +
                '               <i class="fas fa-medal"></i>\n' +
                '                   <a onclick="getSpecifiedType(' + type + ')" >\n' +
                '                       <span style ="color:#575962;background: #f1f1f1;font-size: 15px;border-radius :5px">\n' +
                '                           ' + list[i].type + '\n' +
                '                       </span>\n' +
                '                   </a>\n' +
                '           </span>\n' +
                '           <div class ="glyphicon glyphicon-bookmark" style="color: #4e555b">\n' +
                '               ' + list[i].characterization + '\n' +
                '           </div>\n' +
                '           <div>\n' +
                '               <span id="showUpdateTime' + list[i].projectId + '" class ="glyphicon glyphicon-bookmark" style="color: darkgrey">' + updateTimeTextShow + '</span>\n' +
                '               <span id="showUpdateDate' + list[i].projectId + '" class ="glyphicon glyphicon-bookmark" style="color: darkgrey">' + updateDateTextShow + '</span>\n' +
                '               <span id="showCreateDate' + list[i].projectId + '" class ="glyphicon glyphicon-bookmark" style="color: darkgrey">' + createDateTextShow + '</span>\n' +
                '           </div>\n' +
                '       </div>\n' +
                '    </div>\n' +

                /*项目详情右边*/
                '    <div class="col-lg-3" >\n' +
                '       <i class="fas fa-eye" style="color: darkgrey"></i>\n' +
                '       <span style="color: darkgrey">' + list[i].clickCount + '</span>\n'

            /*判断是否收藏*/
            if (list[i].storeFlag == 1) {
                var storeColor = "#F29F3F";
                if (userId != "") {
                    tableShow += '       <a id="stored' + list[i].projectId + '" onclick="projects_index_del_refrech(' + userId + ',' + list[i].projectId + ')" style="color: ' + storeColor + '">\n'
                } else {

                    tableShow += '       <a id="stored' + list[i].projectId + '" onclick="projects_index_del_refrech(' + 0 + ',' + list[i].projectId + ')" style="color: ' + storeColor + '">\n'
                }
            } else if (list[i].storeFlag == 0) {
                var storeColor = "darkgrey";
                if (userId != "") {
                    tableShow += '       <a id="stored' + list[i].projectId + '" onclick="projects_index_refrech(' + userId + ',' + list[i].projectId + ')" style="color: ' + storeColor + '">\n'
                } else {
                    tableShow += '       <a id="stored' + list[i].projectId + '" onclick="projects_index_refrech(' + 0 + ',' + list[i].projectId + ')" style="color: ' + storeColor + '">\n'
                }
            }
            tableShow +=
                '           <i class="fas fa-star"></i><span id="storeCount' + list[i].projectId + '">' + list[i].storeCount + '</span>\n' +
                '       </a>\n' +
                // '       <a data-toggle="modal" data-target="#RowModal2" style="color: darkgrey" >\n' +
                // '           <i class="fas fa-share-alt"></i>\n' +
                // '        </a>\n' +
                '       <a onclick="showModel(' + list[i].projectId + ')" style="color: darkgrey" >\n' +
                '           <i class="fas fa-share-alt"></i>\n' +
                '        </a>\n' +
                '    </div>\n' +
                '</div>\n' +
                '    <hr style="color: #4C5B5C" size="3" width="96%">'


        }
        $(div).html(tableShow)
    }
</script>
<!--显示隐藏modal框，获取项目路径-->
<script type="text/javascript" th:inline="javascript">
    /*显示弹出框*/
    function showModel(projectId) {
        $("#copyContent").val(getRootPath() + "/projects_view?projectId=" + projectId);
        $("#copyContent").html(getRootPath() + "/projects_view?projectId=" + projectId);
        $("#RowModal").modal('show');
    }

    /*获取项目路径*/
    function getRootPath() {
        //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        var localhostPaht = curWwwPath.substring(0, pos);
        //获取带"/"的项目名，如：/uimcardprj
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName);
    }
</script>
<!--复制分享链接-->
<script type="text/javascript">
    $('#addRowButton').click(function () {
        var Url2 = document.getElementById("copyContent");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        swal("复制成功", {
            buttons: false,
            icon: "success",
            timer: 1000,
        });
    });
</script>
<!--收藏与取消收藏状态切换-->
<script type="text/javascript">
    function projects_index_refrech(userId, projectId) {
        if (userId != 0) {
            checkLoginAndDoFunction(projects_index_refrechDo, userId, projectId)
        } else {
            noLoginALert();
        }
    }

    function projects_index_refrechDo(arguments1) {
        $.ajax({
            type: "post",
            url: "/projects_index_refrech",
            dataType: "json",
            data: {
                userId: arguments1[1],
                projectId: arguments1[2]
            },
            success: function (json) {
                if (json.ok) {
                    $("#stored" + arguments1[2]).css("color", "#F29F3F");
                    var tranfunction = "projects_index_del_refrech(" + userId + "," + projectId + ")"
                    $("#stored" + arguments1[2]).attr("onclick", tranfunction);
                    $("#storeCount" + projectId).html(json.data.storeCount)
                }
            }
        })
    }

    function projects_index_del_refrech(userId, projectId) {
        if (userId != 0) {
            checkLoginAndDoFunction(projects_index_del_refrechDo, userId, projectId)
        } else {
            noLoginALert();
        }
    }

    function projects_index_del_refrechDo(arguments1) {
        $.ajax({
            type: "post",
            url: "/projects_index_del_refrech",
            dataType: "json",
            data: {
                userId: arguments1[1],
                projectId: arguments1[2]
            },
            success: function (json) {
                if (json.ok) {
                    $("#stored" + arguments1[2]).css("color", "darkgrey");
                    var tranfunction = "projects_index_refrech(" + userId + "," + projectId + ")"
                    $("#stored" + arguments1[2]).attr("onclick", tranfunction);
                    $("#storeCount" + projectId).html(json.data.storeCount)
                }
            }
        })
    }
</script>
<!--今日热门，本周热门-->
<script type="text/javascript">
    $(function () {
        var todayDiv = $('#todayDiv');
        var todayPage = $('#todayPage');
        var weekDiv = $('#weekDiv');
        var weekPage = $('#weekPage');
        todayProjectsAndWeekProjects();

        function todayProjectsAndWeekProjects() {
            $.ajax({
                type: "get",
                url: "/todayProjectsAndWeekProjects",
                success: function (json) {
                    appendtodayProjectsAndWeekProjectsHtml(json.todayProjectsList, todayDiv)
                    appendtodayProjectsAndWeekProjectsHtml(json.weekProjectsList, weekDiv)
                }
            })

            /*拼接分页页面*/
            function appendtodayProjectsAndWeekProjectsHtml(list, div) {
                $(div).html("");
                var tableShow = '';
                for (var i = 0; i < list.length; i++) {
                    tableShow += '<div>\n' +
                        '              <div class="col-lg-10">\n' +
                        '                   <a class="defineBStyle" href="projects_view/' + list[i].projectId + '")"\n' +
                        '                      style="color: #145180;font-size: 18px">\n' +
                        '                      <span>' + list[i].username + '/' + list[i].name + '</span>\n' +
                        '                   </a>\n' +
                        '                   <div class="glyphicon glyphicon-bookmark"\n' +
                        '                        style="color: #4e555b;margin-left: 2px;">\n' +
                        '                        ' + list[i].characterization + '\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '            <hr style="color: #4C5B5C" size="3" width="96%">\n' +
                        '          </div>'
                }
                $(div).html(tableShow)
            }
        }


    })
</script>
<!--推荐项目-->
<script type="text/javascript">
    if (userId != "") {
        $(function () {
            $.ajax({
                type: "get",
                url: "/projectsRecommendationPage",
                data: {
                    userId: userId
                },
                success: function (json) {
                    appendProjectsRecordHtml(json, recommendDiv)
                }
            })
        })
    }
</script>
<!-- 完成异步搜索//不能同时运行两个不同的ajax，问题暂未解决 -->
<script type="text/javascript">

    function overFn(obj) {//鼠标在上面
        $(obj).css("background", "#F0F8FF");
    }

    function outFn(obj) {//鼠标离开
        $(obj).css("background", "white");
    }

    function clickFn(obj) {//鼠标点击
        $("#search1").val($(obj).html());
        $("#showDiv1").css("display", "none");
    }

    //上面的是提示框的css代码，下面的是ajax获取代码
    function searchWord(obj) {
        //alert(111);
        //1、获得输入框的输入的内容
        var word = $(obj).val();
        //2、根据输入框的内容去数据库中模糊查询---List<Product>
        $.ajax({
            type: "get",
            url: "/searchWord",
            data: {
                word: word,
            },
            success: function (data) {
                //3、将返回的商品的名称 现在showDiv中
                //alert(data);
                if (data.length > 0) {
                    var content = '';
                    for (var i = 0; i < data.length; i++) {
                        //alert(data[i]);
                        content += '<div style="padding:5px;cursor:pointer" onclick="clickFn(this)" onmouseover="overFn(this)" onmouseout="outFn(this)">' + data[i] + '</div>';
                    }
                    $("#showDiv1").html(content);
                    $("#showDiv1").css("display", "block");
                }
                if (obj.value.length == 0) {//判断输入框是否为空，如果为空则隐藏提示区域
                    $("#showDiv1").css("display", "none");
                }
            },
        });

    }


    function appendProjectsRecordErrorHtml(div) {//此函数用于处理后台数据失败后所返回的页面
        var tableShow = '';
        tableShow +=
            '<div class="col-md-12">\n' +
            '<div class="text-center">\n' +
            '<div style="color: #F29F3F;">\n' +
            '<span class="fas fa-dizzy"></span>\n' +
            '</div>\n' +
            '<h3><b>很抱歉，找不到此数据</b></h3>\n' +
            '</div>\n' +
            '</div>\n';
        div.html(tableShow);
    }

    function searchByWord() {
        if ($("#pills-more-tab").is(":visible")) {
            var div = $('#allDiv');
            var word = $("#search1").val();
            var url = "/get_project_by_word";
            searchAllByName(div, word, url, allPage);
        } else if ($("#pills-recommend-tab").is(":visible")) {
            var div = $('#recommendDiv');
            var word = $("#search1").val();
            var url = "/get_project_by_word";
            searchAllByName(div, word, url, recommendPage);
        }
    }

    //对项目名、负责人搜索模糊查询
    function searchAllByName(div, word, url, ul) {
        $.ajax({
            type: "Get",
            url: url,
            data: {
                page: '1',
                word: word
            },
            success: function (data) {
                appendProjectsRecordHtml(data.list, div)
                var options = {
                    bootstrapMajorVersion: 3,
                    currentPage: data.page,
                    totalPages: data.totalPage,
                    numberOfPages: data.pageSize,
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        $.ajax({
                            type: "get",
                            url: url,
                            dataType: "json",
                            data: {
                                page: page,
                                word: word
                            },
                            success: function (data) {
                                appendProjectsRecordHtml(data.list, div);
                            }
                        });
                    }
                };
                $(ul).bootstrapPaginator(options);
            },
            error: function () {
                appendProjectsRecordErrorHtml(div);
                var options2 = {//根据后台返回的分页相关信息，设置插件参数
                    bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                    currentPage: 1, //当前页数
                    totalPages: 1, //总页数
                    numberOfPages: 5,//每页记录数
                    itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                };
                $(ul).bootstrapPaginator(options2);//设置分页
            }
        })
    }
</script>

</body>
</html>